<template>
	<view class="page">
    <view class="top">
      <u-tabs :current="activeIndex" :list="productClass" @click="click"></u-tabs>
    </view>
    <view class="main">
      <view class="goods_list">
        <view class="goods_item" v-for="(item,index) in product" :key="index" @click="goDetail(item)" >
          <image :src="item.img"></image>
          <view class="price">
            <text>{{item.price}}积分</text>
            <text>￥{{item.oldPrice}}</text>
          </view>
          <view class="goods_name">
            {{item.name}}
          </view>
          <view>
            <img class="goods_img"  src="/static/tabbar/shop.png" alt="" />
          </view>
			</view>
    </view>
    </view>
	</view>
</template>

<script>
  import { baseUrl } from '@/config'
export default {
	data() {
		return {
      activeIndex: 0,
      index:0,
      code:1,
      productClass:[],
      product:[],
      opt:0
		};
	},
onLoad(Option){
this.index =  Option.index
},
async	onShow() {
 await this.getIndex()
  this.getProduct()
	},
 
 
	methods: {
    goDetail(item){
      uni.navigateTo({
           url: `/pages/product-detail/index?id=${item.id}`
        });
			},
    async getIndex(){
      // this.index = uni.getStorageSync('product_key');
      let obj = {
        name: '全部分类',
        code: '9',
				status:'1',
        icon: baseUrl + '/image/009.jpg',
			};
     let r = await uni.request({
          url: baseUrl+'/v1/index/productClassSearch', 
      })
      let res = r[1]
      this.productClass = res.data.data
      this.productClass.push(obj)
      this.code =  this.productClass[this.index].code
      this.activeIndex = this.index.toString()
  },
    getProduct(){
      if(this.code != 9){
        uni.request({
          data: {
          code : this.code
        }, 
        url: baseUrl+'/v1/product/classSearch',
        success: (res) => {
        this.product = res.data.data
          }
        });
      }else{
        uni.request({
          url: baseUrl+'/v1/product/allSearch', 
          success:(res)=>{
            this.product = res.data.data
          }
        })
      }

    },
    click(item) {
      this.code = item.code
			this.activeIndex = item.index;
      this.getProduct()
},

	}
};
</script>

<style lang="scss" scoped>
.page{
  .top{
    .topName{
      background-color:  #0af8e4;
      width: 80%;
      border-radius: 20px;
      margin: 10px auto;
      text-align: center;
    }
  }
  .main{
    .goods_list {
			padding: 0 15rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
      .goods_item {
				background: rgb(219, 240, 226);
				width: 355rpx;
				margin: 10rpx 0;
				padding: 15rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
          image {
					width: 100%;
					height: 250rpx;
					display: block;
					margin: 0 auto;
					border-radius: 20rpx;
				}
        .price {
					color: #07616f;
					font-size: 36rpx;
					text:nth-child(2) {
						color: rgb(0, 0, 0);
						font-size: 28rpx;
						text-decoration: line-through;
						margin-left: 17rpx;
					}
				}
				.goods_name {
					color: #4d2a2a;
					font-size: 28rpx;
					line-height: 50rpx;
					padding-bottom: 15rpx;
					padding-top: 10rpx;
				}
        .goods_img{
          width: 80rpx;
          height: 80rpx;
					display: block;
					margin: 0 auto;
        }
			}
		}
  }
}
</style>
